import { Component } from "solid-js";
import TimeInput from "./TimeInput";
import style from "../App.module.scss";

type Mode = "countup" | "countdown" | "current" | "alarm";

interface ModeSelectorProps {
  mode: Mode;
  onModeChange: (newMode: Mode) => void;
  countdownInitial: number;
  onCountdownInitialChange: (value: number) => void;
  targetTime: number;
  onTargetTimeChange: (value: number) => void;
  formatTimeForInput: (seconds: number) => string;
  handleTimeInput: (e: Event) => void;
}

const ModeSelector: Component<ModeSelectorProps> = (props) => {
  return (
    <div class={style.action}>
      <select
        onChange={(e) => {
          const select = e.target as HTMLSelectElement;
          props.onModeChange(select.value as Mode);
        }}
        value={props.mode}
      >
        <option value="countup">正计时</option>
        <option value="countdown">倒计时</option>
        <option value="current">当前时间</option>
        <option value="alarm">指定定时</option>
      </select>
      {props.mode === "countdown" && (
        <TimeInput
          class={style.timeInput}
          value={props.formatTimeForInput(props.countdownInitial)}
          onChange={(value) => {
            const [hours, minutes, seconds] = value.split(":").map(Number);
            const totalSeconds = hours * 3600 + minutes * 60 + seconds;
            props.onCountdownInitialChange(totalSeconds);
          }}
        />
      )}
      {props.mode === "alarm" && (
        <TimeInput
          class={style.timeInput}
          value={props.formatTimeForInput(props.targetTime)}
          data-is-alarm="true"
          onChange={(value) => {
            props.handleTimeInput({
              target: {
                value,
                dataset: { isAlarm: "true" }
              }
            } as unknown as Event);
          }}
        />
      )}
    </div>
  );
};

export default ModeSelector;


